<template>
  <div class="searchBox">
    <div class="mask" :class="isSearchShow ? 'maskMove' : ''">
      <el-button
        icon="el-icon-search"
        circle
        @click="isSearchShow = !isSearchShow"
      ></el-button>
    </div>
    <el-select
      :value="searchType"
      placeholder="请选择搜索类型"
      @change="handleSearchSelectInputChange"
      :class="!isSearchShow ? 'maskMove' : ''"
    >
      <el-option
        v-for="item in searchTypeOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-input
      :placeholder="searchTypePlaceholder"
      :value="searchInputKey"
      clearable
      @input="searchComInputChange"
    >
    </el-input>
  </div>
</template>

<script>
export default {
  props: [
    "searchType",
    "handleSearchSelectInputChange",
    "searchTypeOptions",
    "searchTypePlaceholder",
    "searchInputKey",
    "searchInputChange",
    "",
  ],
  data() {
    return {
      isSearchShow: false,
    };
  },
  methods: {
    searchComInputChange(val) {
      this.searchInputChange(val);
    },
  },
};
</script>

<style lang="less" scoped>
.searchBox {
  display: flex;
  width: 100%;
}
.mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 33%;
  height: 100%;
  background-color: white;
  z-index: 555;
  transition: all 0.4s;
}

.maskMove {
  left: 38%;
  background-color: transparent;
}
</style>